<template>
	<view>
		<!-- 头部 -->
		<view class="newTitle">
			<image src="../../../static/benefit/redPath2.png" mode=""></image>
			正在热播
		</view>
		<view class="navBox">
			<uni-swiper-dot :info="swiperList" :current="current" mode="dot" field="content">
				<swiper class="swiper-box" @change="swiperChange" :current="swiperDotIndex" autoplay circular>
					<swiper-item v-for="(item, index) in swiperList" :key="index" @click="swiperClick(item)">
						<listItem-Vue :item="item"></listItem-Vue>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 必看片单 -->
    <view class="newList">
      <view class="newTitle">
        <image src="../../../static/benefit/upNewIcon.png" mode=""></image>
        必看片单
      </view>
      <view class="listBox">
        <video-card v-for="(item,index) in list" :key="index" :item="item"/>
      </view>
<!--      <u-loadmore :status="pageObj.status" :nomoreText="null" fontSize="28" iconSize="32"/>-->
    </view>
  </view>
</template>

<script>
	import {Api} from "../../../service/api";
	import listItemVue from '../../../components/listItem.vue';
  import VideoCard from "../../../components/videoCard.vue";
	export default {
		components:{
      VideoCard,
			listItemVue
		},
		data() {
			return {
				current: 0, // 当前滚动
				swiperDotIndex: 0,
				swiperList: [], // 滚动列表
				list: [],// 列表
				pageObj: {
					pageSize: 9,
					pageNum: 0,
					status: 'loading'
				},
			};
		},
		created() {
			this.getList()
		},
		methods: {
			// 监听滑动
			swiperChange(e) {
				this.current = e.detail.current
			},
			// 滑动点击
			swiperClick(e) {
				console.log(e);
			},
			getList(val) {
				if(this.pageObj.status === 'nomore') return
				this.pageObj.status = 'loading'
				Api.getAppTvPageList({
					sutra : 1,
					pageNo: ++ this.pageObj.pageNum,
					pageSize: this.pageObj.pageSize,
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					if(this.list.length < res.data.total)  this.pageObj.status = 'loadmore'
					else this.pageObj.status = 'nomore'
					this.swiperList=this.list.slice(0,3)
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.navBox {
		.swiper-box {
			height: 320rpx;
		}
	}

	.newTitle {
		font-size: 32rpx;
		font-weight: 700;
		color: #171717;
		margin-bottom: 40rpx;

		image {
			width: 46rpx;
			height: 44rpx;
			vertical-align: middle;
			margin-right: 12rpx;
		}
	}

  .listBox {
    width: 100%;
    padding-bottom: 130rpx;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    gap: 23rpx;
  }
</style>
